<!DOCTYPE html>
<html>

<head th:include="_header_include::frag(~{::title},~{},~{})">
    <title>邀约来访派车单</title>
    <style>
        button a{color:#fff!important;}
    </style>
</head>
<body>
<div id="truckingOrder" class="truckingOrder mainPadding" style="display: none;">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>商务管理</el-breadcrumb-item>
        <el-breadcrumb-item>派车单</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="marginB20">
       <!--<shiro:hasPermission name=" aggregation:truckingOrder:export">-->
          <el-button icon="el-icon-upload2" type="primary" @click="exportFun()">导出</el-button>
       <!--</shiro:hasPermission>-->
    </el-row>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
            <el-form :inline="true" class="demo-form-inline mainSearchForm" :model="form" ref="form">                       
                <el-form-item label="邀约来访时间:">
                    <el-date-picker
                        v-model="form.reserveStartTime"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="—" class="widthauto">
                    <el-date-picker
                        v-model="form.reserveEndTime"
                        type="datetime"
                        format="yyyy-MM-dd HH:mm"
                        placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="电销顾问:">
                    <el-select v-model="form.accountId" placeholder="电销顾问" clearable filterable>
                        <el-option
                            v-for="item in accountIdList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item> 
                <el-form-item label="客户手机号:">
                    <el-input v-model="form.customerPhone" placeholder="客户手机号"></el-input>
                </el-form-item>
                <el-form-item label="客户姓名:">
                    <el-input v-model="form.customerName" placeholder="请输入客户姓名"></el-input>
                </el-form-item>
                <el-row v-show="isShow">
                    <el-form-item label="申请提交时间:">
                        <el-date-picker
                            v-model="form.submitStartTime"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="—" class="widthauto">
                        <el-date-picker
                            v-model="form.submitEndTime"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="到站时间:">
                        <el-date-picker
                            v-model="form.arrivalStartTime"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="—" class="widthauto">
                        <el-date-picker
                            v-model="form.arrivalEndTime"
                            type="datetime"
                            format="yyyy-MM-dd HH:mm"
                            placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>     
                </el-row>           
                <div class="mainSearchBtnBox"> 
                    <el-button icon="el-icon-search" type="primary" @click="initSignRecordData" class="searchBtn">搜索</el-button>
                    <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
                    <span style="color: #5c6be8;cursor: pointer;margin:0 10px;" @click="toogleClick"><span v-if="isShow">收起</span><span v-else>展开更多</span><i :class="{'greycolor paddingL6 el-icon-arrow-up':isShow,'greycolor paddingL6 el-icon-arrow-down':!isShow}"></i></span>
                </div>
            </el-form>  
        </div>
        <el-row>
            <el-table 
                ref="dataTable" 
                tooltip-effect="dark" 
                style="width: 100%" 
                border 
                v-loading="loading" 
                :data="dataTable" 
                >
                <el-table-column align="center" type="index" label="序号" width="55"></el-table-column>
                <el-table-column align="center" prop="createTime" label="申请提交时间"  width="130" :formatter="dateFormat" sortable></el-table-column> 
                <el-table-column align="center" prop="submitGroup" label="申请电销组"  width="100"></el-table-column> 
                <el-table-column align="center" prop="telSaleName" label="申请电销顾问"   width="120"></el-table-column>  
                <el-table-column align="center" prop="accountPhone" label="申请顾问电话" width="100"></el-table-column>
                <el-table-column align="center" prop="reserveTime" label="邀约来访时间" width="130" :formatter="dateFormat" sortable></el-table-column>
                <el-table-column align="center" prop="customerName" label="客户姓名" width="130"></el-table-column> 
                <el-table-column align="center" prop="cusPhone" label="联系方式" width="100"></el-table-column>
                <el-table-column align="center" prop="cusNum" label="客户人数"  width="90"></el-table-column>   
                <el-table-column align="center" prop="cusName" label="联系人姓名" width="120"></el-table-column> 
                <el-table-column align="center" prop="departTime" label="出发时间"  width="130" :formatter="dateFormat"></el-table-column> 
                <el-table-column align="center" prop="city" label="出发城市" width="100"></el-table-column> 
                <el-table-column align="center" prop="flight" label="车次／航班" width="120"></el-table-column>
                <el-table-column align="center" prop="arrivalTime" label="到站时间" width="130" :formatter="dateFormat" sortable></el-table-column>
                <el-table-column align="center" prop="pickUpPlace" label="接站地" width="120"></el-table-column>
                <el-table-column align="center" prop="pickUpTime" label="接站时间"  width="130" :formatter="dateFormat"></el-table-column>
                <el-table-column align="center" prop="delayMark" label="延误说明" width="150"></el-table-column>                
                <el-table-column align="center" prop="busCompanyName" label="餐饮公司" width="130"></el-table-column>
                <el-table-column align="center" prop="tasteProject" label="考察项目" width="130"></el-table-column>
                <el-table-column align="center" prop="busDirectorName" label="商务总监" width="130"></el-table-column>
               <!--  <el-table-column align="center" prop="terminal" label="航站楼" width="150"></el-table-column>
                <el-table-column align="center" prop="receivedPlace" label="接到地（酒店／公司）" width="200"></el-table-column> -->
            </el-table>
             <table-pagination :pager="pager" @change="initSignRecordData"></table-pagination>
        </el-row>
    </div>
</div>
<!-- import Vue before Element -->
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">
   /*  var accountIdList = [[${teleSaleList}]]; */
    var projectList=[[${projectList}]];//考察项目
</script>

</body>

<script>
 var signRecordVM = new Vue({
        el: '#truckingOrder',
        data: function() {
            return {
                isShow:false,
            	loading: true,
                form: {
                	reserveStartTime:'',
                    reserveEndTime:'',
                    submitStartTime:'',
                    submitEndTime:'',
                    arrivalStartTime:'',
                    arrivalEndTime:'',
                    accountId:'',
                    customerPhone:'',
                    customerName:'',
                },
                formLabelWidth: '150px',
                dataTable:[],
                accountIdList:[],
                pager:{//
                    total: 0,
                    currentPage: 1,
                    pageSize: 20,
                }
            }        	  
        },
        methods: {
            initSignRecordData(){            	
                var reserveStartTime = this.form.reserveStartTime;
                var reserveEndTime = this.form.reserveEndTime;
                var submitStartTime = this.form.submitStartTime;
                var submitEndTime = this.form.submitEndTime;
                var arrivalStartTime = this.form.arrivalStartTime;
                var arrivalEndTime = this.form.arrivalEndTime;
                var startTimestamp = Date.parse(new Date(reserveStartTime));
                if(reserveEndTime){
                    var endTimestamp = new Date(reserveEndTime);
                    if(startTimestamp> endTimestamp){
                        this.$message({
                            message: '开始时间不能大于结束时间',
                            type: 'warning'
                          });
                        return;
                    }
                }
                var startTimestamp2 = Date.parse(new Date(submitStartTime));
                if(submitEndTime){
                    var endTimestamp2 = new Date(submitEndTime);
                    if(startTimestamp2> endTimestamp2){
                        this.$message({
                            message: '开始时间不能大于结束时间',
                            type: 'warning'
                          });
                        return;
                    }
                }
                var startTimestamp3 = Date.parse(new Date(arrivalStartTime));
                if(arrivalEndTime){
                    var endTimestamp3 = new Date(arrivalEndTime);
                    if(startTimestamp3> endTimestamp3){
                        this.$message({
                            message: '开始时间不能大于结束时间',
                            type: 'warning'
                          });
                        return;
                    }
                }
            	 var param = this.form;
                 param.pageNum=this.pager.currentPage;
                 param.pageSize=this.pager.pageSize;
                 axios.post('/truckingOrder/listTrackingOrder',param)
                 .then(function (response) {
                     var data =  response.data
                     if(data.code=='0'){
                        var resData = data.data;
                        var curData = resData.data;
                 /*        for(var i=0;i<curData.length;i++){
                        	var ss = signRecordVM.transformProject(curData[i].tasteProjectId);
                        	console.info(ss);
                        	curData[i].tasteProject=ss;
                        } */
                        
                        
                        signRecordVM.dataTable= curData;
                      //3.分页组件
                        signRecordVM.pager.total= resData.total;
                        signRecordVM.pager.currentPage = resData.currentPage;
                        signRecordVM.pager.pageSize = resData.pageSize;
                     }else{
                    	 signRecordVM.$message({message:data.msg,type:'error'});
                         console.log(response);
                     }
                 
                 })
                 .catch(function (error) {
                      console.log(error);
                 }).then(function(){
                	 signRecordVM.loading=false;
                 });
            	
            },
            exportFun(){
                var param = this.form;
                param.pageNum='';
                param.pageSize='';
                axios.post('/truckingOrder/exportTrackingOrder',param,{responseType:'blob'})
                .then(function (response) {
                    console.log(response)
                    var data =  response.data;
                    var fileName = response.headers.filename;
                        saveAs(data,decodeURI(fileName));
                })
                .catch(function (error) {
                    console.log(error);
                }).then(function(){
                    signRecordVM.loading=false;
                });                     	
            	
            },
            //日期数据格式化方法
            dateFormat( row, column, cellValue, index) {
                if (cellValue == undefined) {
                    return "";
                }
                return moment(cellValue).format("YYYY-MM-DD HH:mm:ss");
            },
            //考察项目转换方法
            transformProject(cellValue) {
                var text="";
                if(projectList&&cellValue){
                    var array=cellValue.split(",");
                    for(var i=0;i<array.length;i++){
                        for(var j=0;j<projectList.length;j++){
                             if(array[i]==projectList[j].id){
                                 if(i==0){
                                     text=projectList[j].projectName;
                                 }else{
                                     text=text+","+projectList[j].projectName;
                                 }
                             }
                         }
                     }
                 }
                 return text;
            },
            getAllTeleSales(){//电销顾问下拉框
            	axios.post('/truckingOrder/queryAllTeleSales', {})
                .then(function (response) {
                      var result =  response.data;
                      if(result.code=='0'){
                          var table=result.data;
                          signRecordVM.accountIdList= table;
                      }else{
                          console.error(response);
                      }
                      
                })
                .catch(function (error) {
                     console.log(error);
                });  
            },
            toogleClick(){
                if(this.isShow){
                    this.isShow=false
                }else{
                    this.isShow=true
                }          
            },
        },
        mounted(){
            document.getElementById('truckingOrder').style.display = 'block';
        },
        created(){
            // 取页数存储
            var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
            if(localVal){this.pager.pageSize = localVal;}
            
        	this.initSignRecordData();
        	this.getAllTeleSales();
        }
    })
</script>
</html>